<template>
	<view>
		<view class="u-padding-30 u-margin-top-20" style="background-color: #fff;">
			<view class="u-flex u-row-between">
				<image class="act_list" mode="heightFix" src="https://resourse.cnlhjt.com/upload/20220825/a31b9f59513c9eab0a224b15e231ab50.png" @click="scancode"></image>
				<image class="act_list" mode="heightFix" src="https://resourse.cnlhjt.com/upload/20220825/4e48ea2cb71577019bb05f36fa7f8865.png" @click="show=true"></image>
				
			</view>
		</view>
		<view class="bottom_con">
			<view class="u-padding-15">
				<u-tabs-swiper ref="uTabs" bgColor="#F3F5F7" :list="list" activeColor="#0B868E" :activeItemStyle="activeItemStyle" fontSize="28" :current="current" @change="tabsChange" :is-scroll="false"></u-tabs-swiper>
			</view>
			<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<view style="background-color: #fff;" class="u-padding-20">
						<view class="title_con u-rela">
							<text>{{detail.title}}</text>
							<image v-if="status==-1" class="status_btn u-abso" src="https://resourse.cnlhjt.com/upload/20220825/23a08670c569a7ed00a0f6cc135c250b.png" mode=""></image>
						</view>
						<view class="title_con2 u-rela">
							<text>主办方</text>
							<text class="u-abso pos_right right_con">{{detail.sponsor}}</text>
						</view>
						<view class="title_con2 u-rela">
							<text>活动地址</text>
							<text class="u-abso pos_right right_con">{{detail.address}}</text>
						</view>
						<view class="title_con2 u-rela">
							<text>限制人数</text>
							<text class="u-abso pos_right right_con">{{detail.limit}}人</text>
						</view>
						<view class="title_con2 u-rela">
							<text>发布时间</text>
							<text class="u-abso pos_right right_con">{{detail.time}}</text>
						</view>
						<view class="title_con2 u-rela">
							<text style="color:#006971;">已参与人数：{{detail.join}}人</text>
							<text v-if="detail.free == 0" style="margin-left: 40rpx;font-size: 30rpx; color: red;" class="u-abso pos_right right_con">免费</text>
							<text v-else style="margin-left: 40rpx; color: red; font-size: 30rpx;" class="u-abso pos_right right_con">￥{{detail.price}}/人</text>
						</view>
					</view>
					
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="order_con u-rela" v-for="(item,index) in filllist" v-if="item.status==1 && item.complete==0">
						<image class="va_m" :src="item.avatar"></image>
						<view class="dis_inl_blo va_m">
							<view class="u-margin-bottom-15">{{item.username}}</view>
							<text>报名时间：{{item.join_time}}</text>
						</view>
						<view style="color:#18B566;" class="u-abso caozuo">未核销</view>
					</view>
					<view v-if="list1.length==0" class="u-text-center" style="color:#666;margin-top:80rpx;">暂无记录</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="order_con u-rela" v-for="(item,index) in filllist" v-if="item.status==1 && item.complete==1">
						<image class="va_m" :src="item.avatar"></image>
						<view class="dis_inl_blo va_m">
							<view class="u-margin-bottom-15">{{item.username}}</view>
							<text>报名时间：{{item.join_time}}</text>
						</view>
						<view class="u-abso caozuo">已核销</view>
					</view>
					<view v-if="list2.length==0" class="u-text-center" style="color:#666;margin-top:80rpx;">暂无记录</view>
				</swiper-item>
			</swiper>
		</view>
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="shadow_con">
						<input v-model="code" type="text" placeholder="请输入核销码">
						<button class="btn_con" @click="confirm">确认核销</button>
					</view>
				</view>
			</view>
		</u-mask>
		<u-modal v-model="showmodle" :content="content" @confirm="confirm" show-cancel-button=true></u-modal>
		<!-- 弹框提示 -->
		<u-toast ref="uToast" />
	</view>
	
</template>

<script>
	import {
		getActiveDetail,
		completeActive
	} from "@/service/indexService.js";
	export default {
		data () {
			return {
				id:'',
				status:0,
				show:false,
				showmodle:false,
				content:'确认核销该记录吗？',
				detail:{},
				
				list: [{
					name: '详情'
				}, {
					name: '报名记录'
				}, {
					name: '核销记录'
				}],
				activeItemStyle:{
					'font-size':'30rpx'
				},
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				
				code:'',
				filllist:[],
				list1:[],
				list2:[]
			}
		},
		onLoad(options) {
			this.id=options.id;
			this.status=options.status;
			getActiveDetail({
				id:options.id
			}).then(this.getDetail);
		},
		onShow() {
			
		},
		methods:{
			getDetail:function(e){
				
				if(e.code==200){
					this.detail=e.result;
					this.filllist=e.result.users;
					
					for (var i=0;i<e.result.users.length;i++){
						if(e.result.users[i].complete==0){
							this.list1.push(e.result.users[i])
						}else{
							this.list2.push(e.result.users[i])
						}
					}
				}
			},
			scancode:function(){
				
				var that=this;
				uni.scanCode({
					success(e) {
						that.code=e.result
						that.showmodle=true;
					}
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			confirm:function(){
				completeActive({
					id:this.id,
					code:this.code
				}).then(res=>{
					
					if(res.code==200){
						this.showmodle=false;
						this.show=false;
						this.$refs.uToast.show({
							type: 'success',
							title: res.msg,
							icon:false
						})
						getActiveDetail({
							id:this.id
						}).then(this.getDetail);
					}else{
						this.$refs.uToast.show({
							type: 'error',
							title: res.msg,
							icon:false
							// message: e.msg,
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.u-tabs-scorll-flex.data-v-bb8e75aa{
		display: inline-block !important;
	}
	page{
		background-color: #f3f5f7;
	}
	.act_list{
		width:49%;
		height:200rpx;
	}
	
	.warp {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		height: 100%;
	}
	
	.rect {
		width: 100%;
		height: 160px;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #fff;
	}
	.shadow_con{
		padding:80rpx 20rpx;
	}
	.shadow_con input{
		width:93%;
		height:70rpx;
		padding:0 20rpx;
		margin-bottom:30rpx;
		border-radius: 10rpx;
		border:1rpx solid #ccc;
		background-color: #fafafa;
	}
	.btn_con{
		height:70rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		border-radius: 35rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		color:#fff;
	}
	swiper{
		height:900rpx !important;
	}
	
	.title_con{
		font-size: 32rpx; font-weight: 800; color: #333; font-family: Arial, Helvetica, sans-serif;
		padding:15rpx 0;
	}
	.title_con2{
		margin-top: 5rpx;
		color:#666;
		font-size: 28rpx;
		padding:15rpx 0;
	}
	.right_con{
		color:#333;
	}
	.order_con{
		padding:30rpx 10rpx;
		margin-top:15rpx;
		font-size: 30rpx;
		background-color: #fff;
	}
	.order_con image{
		width:110rpx;
		height:110rpx;
		margin-right:30rpx;
		margin-left:20rpx;
		border-radius: 50%;
		
	}
	.order_con text{
		font-size: 28rpx;
		color:#666;
	}
	.caozuo{
		font-size: 32rpx;
		color:#ff0000;
		top:50rpx;
		right:30rpx;
	}
	.status_btn{
		right:20rpx;
		top:-15rpx;
		width:100rpx;
		height:100rpx;
		opacity: 0.5;
	}
	
</style>
